/* Common elements */
.sz_rounded {
  -webkit-border-radius: 20px; //For Safari, etc.
  -moz-border-radius: 20px; //For Mozilla, etc.
  border-radius: 20px; //CSS3 Feature
}

.sz_floatRight {
  float:right;
}

.sz_floatLeft {
  float:left;
}

.sz_clear 
{
  clear:both;
}

/* Pane UI */
#szPane {
  position:fixed;
  top:0;
  left:0;
  width:10px;
  height:100%;
  z-index: 99999;
  background:rgba(242,243,244,0.5);

  font-family: Verdana, sans-serif;
  font-size:12px;
}

#szPane p {
  margin:0;
}

#szPane a {
  margin:0;
  text-decoration: none;
}

#szPane textarea {
  display:block;
  border: 1px solid #ccc;
}

#szPane input {
  display:block;
  border: 1px solid #ccc;
}

#szPane img {
  display:inline;
}


#szPane:hover {
  background:rgba(242,243,244,0.9);
}

#szPaneContent {
  display:none;
  /*background-color: #F2F3F4;*/
  background:rgba(242,243,244,0.9);
  height: 100%;
  border-right: 1px solid #eee;
}

#szSearchPanel {
  margin:10px;
}

#szMarkPanel {
  text-align: center;
}

.sz_pane_filter_input {
  width:270px;
  height:16px;
  padding:2px;
  font-size:12px;
  line-height: 16px;
  border:1px solid #ccc;
  -webkit-border-radius: 20px; //For Safari, etc.
  -moz-border-radius: 20px; //For Mozilla, etc.
  border-radius: 20px; //CSS3 Feature

}

.sz_pane_container {
  margin:10px;
  padding-top:10px;
  min-height:200px;
}

.sz_pane_header {
  height: 30px;
  line-height: 30px;
}

.sz_pane_header_action {
  float:right;display:block;line-height:30px;height:30px;width:30px
}

.sz_pane_footer {
  height: 20px;
  line-height: 20px;
}


/* New note panel*/
#szNewNoteAction {
  width:64px;
  height:45px;
  background-image: url('http://127.0.0.1:3000/images/note_action2.png');
  background-repeat: no-repeat;
  background-position:center; 
}

#szNewNoteAction.active{
  background-image: url('http://127.0.0.1:3000/images/note_active2.png');
}

#szNewNotePanel {
  display: none;
}

#szNewNoteTextArea {
  margin-top:20px;
  width:270px;
  border:1px solid #ccc;
  height:80px;
  padding:2px; 
}

/* New conversation panel*/
#szNewCnvAction {
  width:64px;
  height:45px;
  background-image: url('http://127.0.0.1:3000/images/share_action2.png');
  background-repeat: no-repeat;
  background-position:center; 
}

#szNewCnvAction.active{
  background-image: url('http://127.0.0.1:3000/images/share_active2.png');
}

#szNewCnvPanel {
  display: none;
}

#szNewCnvParticipantsInput {
  width:270px;
  border:1px solid #ccc;
  height:20px;
  padding:2px;
}

#szNewParticipantsBox {
  display:none;
  width:270px;
  height:40px;
}

#szNewCnvTitleInput {
  width:270px;
  border:1px solid #ccc;
  height:20px;
  padding:2px;
}

#szNewCnvTextArea {
  margin-top:20px;
  width:270px;
  border:1px solid #ccc;
  height:80px;
  padding:2px; 
}

/* Active conversation panel */

#szPanelActiveConversation {
 display: none; 
}

#szActiveConversationNote {
  display: none; 
}


#szActiveConversationTitle {
  margin:2px;
  font-weight: bold;
  height:20px;
}

#szActiveConversationParticipants {
  height:40px;
}

.sz_active_conversation_participant {
  float:left;
  height:32px;
  width:30px;
}

.sz_active_conversation_participant img {
  height:32px;
  width:30px;
}

div.sz_cnv_item {
  background-color: #fff;
  width:250px;
  min-height: 80px;
  line-height: 20px;
  margin-bottom:10px;
  padding:5px;
  text-align: left;
  border:1px solid #ccc;
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px; 
  border-radius: 2px;
}

.sz_cnv_footer {
  height:30px;
}

.sz_cnv_add_pal_action {
  float:right;
}

.sz_cnv_add_note_action {
  float:right;
}

.sz_cnv_more_action {
  float:right;
  font-size:10px;
}

.sz_cnv_top_note {
  background-color: #FAE7B5;
  width:240px;
  min-height: 30px;
  line-height: 20px;
  margin-bottom:10px;
  padding:5px;
  text-align: left;
  border:1px solid #ccc;
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px; 
  border-radius: 2px;
}

.sz_note_item {
  background-color: #FAE7B5;
  width:270px;
  min-height: 30px;
  line-height: 20px;
  margin-bottom:10px;
  padding:5px;
  text-align: left;
  border:1px solid #ccc;
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px; 
  border-radius: 2px;

}

.sz_cnv_pals {
  font-size: 10px;
  height:30px;
}



.sz_cnv_fuzzy_date {
  font-size: 10px;
  float: left;
}

.sz_note_author {
  font-size: 10px;
  float: left;
}

.sz_note_fuzzy_date {
  font-size: 10px;
  float: right;
}


/*From bootstrap*/
.label-info {
  background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

.label[href]:hover,
.label[href]:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.label:empty {
  display: none;
}

.btn .label {
  position: relative;
  top: -1px;
}

.label-default {
  background-color: #999999;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}

.label-primary {
  background-color: #428bca;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}

.label-success {
  background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}

/* From bootstrap-tagsinput.css*/
.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}


